<!-- 任务配置_选择指令的弹窗 -->
<template>
    <el-dialog title="选择指令" width="1000px" :visible.sync="dialogVisible" append-to-body :before-close="handleClose"
        :close-on-click-modal="false" :destroy-on-close="true">
        <div class="main flex flex-row">
            <div class="left flex flex-col">
                <div class="w-full flex items-center" style="gap: 4px">
                    <div class="tree-box">
                        <Tree ref="modelDataTreeRef" :isDataModeling="true" :treeData="modelDataList"
                            :globalTreeData="globalTreeData" @nodeClick="nodeClick"></Tree>
                    </div>
                </div>
            </div>
            <div class="divider"></div>
            <div class="right">
                <FolderDetail v-if="isFolder" ref="folderRef" :readonly="false" :flag="'dataModeling'"
                    :treeData="modelDataList" :nodeInfo="selectedNodeInfo"></FolderDetail>
                <ModelDataJsonSchema v-if="isJsonSchema" ref="jsonSchemaRef" :modelId="modelInfo.data.modelId"
                    :mainVersion="mainVersionInfo.mainVersionId" :curNode="selectedNodeInfo"
                    :parentNode="selectedNodeInfo" :treeData="modelDataList" :globalTreeData="globalTreeData">
                </ModelDataJsonSchema>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="jtyj-btn-cancel" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>

    </el-dialog>
</template>

<script>
import { getEntityTree } from "@/api/myspace/scenario-edit-tool/scenario-edit";
import Tree from "@/components/LeftTree/tree.vue";
import FolderDetail from "@/views/myspace/model-manage-tool/components/folder-detail.vue";
import ModelDataJsonSchema from "@/views/myspace/model-manage-tool/components/modelData-jsonSchema-detail.vue";
export default {
    name: "AddDialog",
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            isFilterOpen: false,
            isFolder: false, // 是否展示文件夹详情
            isJsonSchema: false,
            selectedNodeInfo: {}, // 当前选中节点的信息
            modelDataList: [], // 模型数据
            globalTreeData: [], //全局模型数据
            currentNodeKey: 0,
            filters: {
                status: "",
                tags: "",
                owner: "",
                creator: "",
                lastModifier: "",
                matchType: "include",
            },
        }
    },
    components: {
        Tree,
    },
    computed: {
        filterNum() {
            return Object.values(this.filters).filter((item) => item).length - 1;
        },
    },
    props: {
        scenarioId: {
            type: Number,
            default: 0,
        },
    },
    created() {
        // 获取树节点数据
        this.getEntityTree({
            scenarioId: this.scenarioId,
        });
    },
    methods: {
        /**
         * 获取实体树
         * @param query 获取参数 {scenarioId: 1}
         */
        getEntityTree(query) {
            console.log(query);
            getEntityTree(query).then(response => {
                if (response.code === 200) {
                    this.treeData = response.data[0].commonTreeList;
                }
            })
        },

        handleClose(done) {
            this.dialogVisible = false;
        },

        nodeClick(node) {
            this.selectedNodeInfo = node;
            // this.defaultExpandedKeys = Array.from(new Set([...this.defaultExpandedKeys, node.id]))
            // this.currentNodeKey = node.id;
            // this.$refs.modelDataTreeRef.$refs.treeRef.setCurrentKey(this.currentNodeKey)
            if (node.type == 0) {
                // 点击的文件夹
                this.isFolder = true;
                this.isJsonSchema = false;
            } else {
                // 点击的文件
                this.isFolder = false;
                this.isJsonSchema = true;
                this.$nextTick(() => {
                    this.$refs.jsonSchemaRef.isAddModelData = false;
                    this.$refs.jsonSchemaRef.reset(false, this.selectedNodeInfo.data);
                });
            }
        },
    },

}

</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;

    .left {
        width: 300px;
        height: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        position: relative;
        padding: 10px 10px 0 0;

        .filer-box {
            display: flex;
            flex-wrap: wrap;
            transition: all 0.5s;

            .filter-item {
                width: 50%;
                padding: 5px 5px 0 0;

                .el-radio-group {
                    display: flex;
                }
            }
        }

        .tree-box {
            flex-grow: 1;
            margin-top: 5px;
            box-sizing: border-box;
        }
    }

    .divider {
        width: 1px;
        height: auto;
        flex-grow: 0;
        position: relative;
        align-self: stretch;
        background-color: var(--ui-border-color-split);
    }

    .right {
        width: 256px;
        height: 100%;
        min-width: 0px;
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        position: relative;
        overflow: auto;
    }
}
</style>